<template> 
  <div class="flex-container">
    <div class="left">
      <TreeSearch style="width: 100%;margin-bottom: 10px;" @changeOrgId="changeOrgId" ref="refTreeSearch"
        v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'"></TreeSearch>

      <el-select size="small" style="width: 100%;" clearable @change="changeunitId" v-loadMore="loadMore"
        v-model='selectedValue' placeholder='请选择联网单位' filterable remote :remote-method="remoteMethod"
        @clear="handleClear">
        <el-option v-for='item in orgList' :label='item.orgName' :value='item.id' :key='item.id'>
        </el-option>
        <div class="div_box2" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
      </el-select>

      <Tree ref="refTree" :orgId="orgId" @toggleOrgId="toggleOrgId"></Tree>
    </div>
    <div class="right">
      <!-- <ichnography ref="refichnography" :orgId="orgId"></ichnography> -->
      <div class="el_container">
        <div class="contLeft">
          <div class="handle" v-show="floorInfo != '' && floorInfo.image != ''">
            <div>
              <el-button size="small" @click="onDeleteMark" icon="el-icon-delete" type="primary">清空</el-button>
              <el-button size="small" @click="onDel" icon="el-icon-delete" type="primary">删除设备</el-button>
              <el-button size="small" @click="onEdit" icon="el-icon-edit-outline" type="primary">更改平面图</el-button>
              <el-button size="small" @click="onDelplan" icon="el-icon-delete" type="primary">删除平面图</el-button>
            </div>
            <div>
              <el-button type="primary" icon="iconfont miaozhundingwei" size="small" style="height: 32px;"
                @click="onrecover"></el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="onlargen"></el-button>
              <el-button type="primary" icon="el-icon-minus" size="small" @click="onlessen"></el-button>
            </div>
          </div>
          <div class="container" v-show="floorInfo != ''" :style="floorInfo.image == '' ? 'border:none;' : ''">
            <div class="caritem_div" v-show="floorInfo.image != ''">
              <div class="div_box" :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
                @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
                @mouseup="handleMouseUp">
                <img class="elImage" ref="floorImage" :src="floorInfo.image" @click="setPoint" @mousedown.prevent
                  @dragover.prevent @drop="onDrop" />
                <div :class="[
                  'device',
                  { 'device3': markId == item.id },
                  { 'device2': item.isAlarm == 1 },
                  { 'device4': item.isAlarm == 1 && markId == item.id }
                ]" :style="{ top: item.top + 'px', left: item.left + 'px' }" v-for="(item, index) in markVOList"
                  :key="index" @mousedown.stop="handleMouseDown2($event, item, index)" @mousedown.prevent>
                  <i class="icon" :class="iconclass(item)"></i>
                  <div class="pop-up">
                    <div style="margin-bottom: 5px">
                      设备编码：{{ item.imei }}
                    </div>
                    <div style="margin-bottom: 5px">产品类型：{{ item.productName }}</div>
                    <div style="margin-bottom: 5px">产品型号：{{ item.classMark }}</div>
                    <div style="margin-bottom: 5px">设备状态：{{ item.online == 0 ? '离线' : '在线' }}</div>
                    <div>告警状态：{{ item.isAlarm == 0 ? '正常' : '告警' }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="caritem_div" v-show="floorInfo.image == ''">
              <el-upload class="upload-demo" drag :show-file-list="false" :action="baseUrl" accept=".jpg,.png"
                :headers="headers" multiple :before-upload="beforeAvatarUpload" :on-success="handleSuccessFunction">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__text">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
          </div>

          <div v-show="floorInfo == ''" class="no-warn-info">
            <img :src="wugj" class="img2" />
            <div>请在左侧选择楼层</div>
          </div>
        </div>

        <div class="el_aside" v-show="flag">
          <el-select v-model="productId" placeholder="产品类型" size="small" style="width: 100%"
            clearable @change="getGetMark()">
            <el-option v-for="(item, index) in productList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <!-- <el-select v-model="isMark" placeholder="标记" size="small" style="width: 100%;margin-top: 15px;"
                        clearable @change="getGetMark(false)">
                        <el-option v-for="item in isMarkList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select> -->
          <RecycleScroller class="dept-tree" v-show="markList.length > 0" :items="markList" :item-size="52"
            :buffer="1000" key-field="id">
            <template v-slot="{ item, index }">
              <div @click="clickTree(item)">
                <el-tooltip effect="dark" placement="left" :popper-class="'sub-poper-class'">
                  <div slot="content">设备编码：{{ item.imei }}<br />
                    产品类型：{{ item.productName }}<br />
                    产品型号：{{ item.classMark }}<br />
                    设备状态：{{ item.online == 0 ? '离线' : '在线' }}<br />
                    告警状态：{{ item.isAlarm == 0 ? '正常' : '告警' }}
                    <!-- 安装备注：{{ item.remark || '-' }} -->
                  </div>
                  <div class="facility">
                    <i class="el_img" :class="getimg(item)" :style="item.mark == '' ? 'opacity:0.7;' : ''"
                      @dragstart="onDragStart(item, index, $event)" draggable="true"></i>
                    <!-- <img :src="getimg(item.productName)" class="el_img" alt=""
                    :style="item.mark == '' ? 'opacity:0.7;' : ''"> -->
                    <span :style="item.mark == '' ? 'opacity:0.7;' : ''">{{ item.productName }}</span>
                    <span style="font-size: 13px;color: #F12A2A;"><b v-show="item.mark == ''">未上图</b></span>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </RecycleScroller>

          <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getGetMark" class="pagination"
            v-show="markList.length > 0" layout="sizes, pager" :pageSizes="[10, 20, 50, 200]" :pagerCount="3" />

          <div v-show="markList.length == 0" class="no-warn-info">
            <img :src="wugj" />
            <div>当前区域暂无数据列表</div>
          </div>

          <el-upload ref="upload" :show-file-list="false" :action="baseUrl" accept=".jpg,.png" :headers="headers"
            :before-upload="beforeAvatarUpload" :on-success="handleSuccessFunction">
            <i class="el-icon-plus"></i>
          </el-upload>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import ichnography from "../ichnography/ichnography.vue"; //平面图
import { jsonp } from "vue-jsonp"; //使用jsonp
// import Tree from "@components/tree/Unit.vue"; //组织机构
import { reqOrgList } from "@api/api.js";
import TreeSearch from "@components/TreeSearch.vue";
import Tree from "./components/Tree.vue"; //组织机构
import advanceSearchMixin from "./mixins/advanceSearch.js"; //平面图方法
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  name: "planar",
  components: {
    Pagination,
    ichnography,
    Tree,
    TreeSearch,
    RecycleScroller
  },
  mixins: [tableStyleMixin, advanceSearchMixin],
  data() {
    return {
      dataList: [],
      wugj: require("@assets/images/datav/wugj.png"),
      isZoom: false,
      orgId: "",
      role: "",
      activeName: "unitInfo",
      editOrgInfo: {},
      getLocationInfo: {
        getLat: "",
        getLng: "",
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
      },
      getAddressflag: false, //地图选点
      floorInfo: '',
      draggingIndex: null,
      startX2: 0,
      startY2: 0,
      parentId: "",
      orgList: [],
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      loading: false,
      orgName: '',
      selectedValue: '',
    };
  },
  async mounted() {
    if (this.user.roleName == 'INSTERALL_USER' || this.user.roleName == 'UNIT_ADMIN') {
      this.getOrgList()
    }
  },
  async created() {
  },
  watch: {},
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  methods: {
    // 清空
    handleClear() {
      this.selectedValue = '';
      this.orgName = '';
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.orgList = []
      this.getOrgList()
    },
    // 远程搜索
    async remoteMethod(query) {
      this.selectedValue = query //保留输入的值
      this.orgName = query;
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.orgList = []
      this.getOrgList()
    },
    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
      this.sysInstanceIndex++
      this.loading = true;
      // 获取列表数据的方法
      await this.getOrgList()
      this.loading = false;
    },
    // 请求单位列表
    async getOrgList() {
      let { tenantId, userId, roleName } = this.user;
      const res = await reqOrgList({
        tenantId,
        userId,
        roleName,
        orgName: this.orgName,
        parentId: this.parentId,
        type: "4"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows
    },
    changeunitId(e) {
      // console.log(e,'eeee');
      this.orgId = this.selectedValue;
      if (e == '') {
        this.floorInfo = ''
        // this.flag = false;
        this.$refs.refTree.getclone()
      } else {
        this.$refs.refTree.getBuildings(this.selectedValue)
      }
    },
    // 切换机构
    async changeOrgId(data) {
      // console.log(data,'data');
      // this.orgId = data.id;
      // this.$refs.refTree.getBuildings(data.id)
      this.parentId = data.id
      this.handleClear();
    },
    async toggleOrgId(data) {
      // console.log(data,this.floorInfo);
      this.flag = true;//点击楼层显示列表
      if (data.id != this.floorInfo.id) {
        this.productId = ''
        this.markVOList = []
        this.markList = []
      }
      this.floorInfo = data;
      this.markId = ''//选中的设备清除
      this.limit = 10
      // console.log(this.floorInfo, 'this.floorInfo');
      if (this.floorInfo == '') {
        // 非楼层点击
        this.markVOList = []
        this.markList = []
        return
      }
      await this.getProductList()
      await this.getGetMark()
    },
  },
};
</script>

<style scoped lang="less">
@import url("./planar.less");
@import url("~@views/style/tablePage.less");

.no-warn-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-top: 1.5%;
  color: @primaryThemeTxtColor;
  font-size: 15px;

  >img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
  }

  .img2 {
    width: 170px;
    height: 170px;
  }
}

::v-deep .el-upload-dragger {
  background-color: transparent !important;
  width: 400px;
  height: 220px;
}

.el-upload__text {
  color: @primaryThemeTxtColor;
}

::v-deep .el-upload-dragger .el-icon-upload {
  color: #7367F0;
}

.el-upload-dragger .el-upload__text em {
  color: #7367F0;
}

::v-deep .pagination .el-pagination {
  padding: 0 !important;
  height: 50px;
}

// 下拉框加载开始
.div_box2 {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束</style>